<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>D3交互式数据可视化</title>
	</head>
	<body>
		<ul>
			<li>data()能将数组各项分别绑定到选择集的各元素上，并且能指定绑定的规则</li>
			<li>update:数组长度 = 元素数量</li>
			<li>enter:数组长度 > 元素数量</li>
			<li>exit:数组长度 < 元素数量</li>
			<li>data()默认是按索引号顺序绑定的，也可以不按此顺序进行，这就需要用data()的第二个参数，此参数是一个键函数</li>
			<li><strong>只有在选择集原来已经绑定有数据的情况下，使用键函数才有效果</strong></li>
			<li>大多数情况下：update部分是“更新元素属性”，enter部分是“添加元素并赋予初始属性”，exit部分是“删除元素”</li>
		</ul>
		<hr/>
		<div class="wrap">
			<p></p>
			<p></p>
			<p></p>
			<h3></h3>
			<h3></h3>
			<h3></h3>
		</div>
		
		<script src="js/d3_3.5.7.js"></script>
		<script>
			
			var dataset = [
				{id:3,name:"张三"},
				{id:6,name:"李四"},
				{id:9,name:"王五"}
			];
			var persons = [
				{id:6,name:"张三"},
				{id:9,name:"李四"},
				{id:3,name:"王五"}
			];
			var p = d3.select(".wrap").selectAll("p");
			p.data(dataset).text(function(d,i) {
				return d.id + ':' + d.name
			})
			p.data(persons,function(d) {
				return d.id
			})
			.text(function(d) {
				return d.id + ':' + d.name;
			})
			var h = d3.select('.wrap').selectAll("h3");
			var hData = [10,20,30,40,50,60,70,80];
			var update = h.data(hData);
			update.text(function(d,i) {
				return "第" + i +"个值是：" + d
			})
			var enter = update.enter().append("h3").text(function(d,i) {
				return "第" + i +"个值是：" + d
			})	
			update.exit().remove()	
		</script>
	</body>
</html>